<template>
  <div>
    <div ref="legend" style="width:600px;height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted () {
    this.setLegend()
  },
  methods: {

    setLegend () {
      function genData (count) {
        // prettier-ignore
        const nameList = [
          '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
        ];
        const legendData = [];
        const seriesData = [];
        for (let i = 0; i < count; i++) {
          const name =
            Math.random() > 0.65
              ? makeWord(4, 1) + '·' + makeWord(3, 0)
              : makeWord(2, 1);
          legendData.push(name);
          seriesData.push({
            name: name,
            value: Math.round(Math.random() * 100000)
          });
        }
        return {
          legendData: legendData,
          seriesData: seriesData
        };
        function makeWord (max, min) {
          const nameLen = Math.ceil(Math.random() * max + min);
          const name = [];
          for (let i = 0; i < nameLen; i++) {
            name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
          }
          return name.join('');
        }
      }
      const data = genData(50);
      // console.log(data);

      const obj = echarts.init(this.$refs.legend)
      // 给初始化好的对象,配置选
      const option = {
        title: {
          text: "标题"
        },
        // 指明当前的数据是什么类型的
        legend: {
          // 普通的图例,scroll
          type: 'scroll',
          right: 0,
          orient: 'vertical',
          data: data.legendData,
          // 默认是5 箭头和字的距离
          pageButtonItemGap: 50,
          // 图例和上下箭头的距离
          // pageButtonGap: 50
          // 上下箭头的位置,默认end 在下边,在右边
          pageButtonPosition: 'start',
          // pageFormatter: '当前{current}/总共{total}页'
          pageFormatter: function ({ current, total }) {
            // console.log(obj);
            // const { current, total } = obj
            // return `${obj.current}/总共${obj.total}页`
            return `${current}/${total}页`
          },
          // pageIcons: {
          //   vertical: ['M0,0L20,0L10,-20z', "image://https://hbimg.huaban.com/a457f8c7921b5543ad0020485eaa6ef7532512f22bb5-sS8hvI_fw658"]
          // }
          // 默认'#2f4554'
          pageIconColor: '#ef0000',
          // 不激活颜色
          pageIconInactiveColor: '#0a0'
        },
        // 系列,系列里边有多个数据
        series: [
          {
            name: '姓名',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: data.seriesData
          }
        ]
      }
      obj.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
